<template>
  <div class="ShowBox">
    <div v-if="type === 'image'" class="common-style">
      <div class="info">
        <el-descriptions :column="1" border>
          <el-descriptions-item>
            <template #label>
              文件名
            </template>
            <span class="file-path" @click="fileLoad(fileurl)">{{ getFileName(fileurl) }}</span>
          </el-descriptions-item>

          <el-descriptions-item v-for="(item, index) in file_info" :key="index">
            <template #label>
              {{ fieldInfo[index] || index }}
            </template>
            {{ item }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              数据来源
            </template>
            <span>{{ source }}</span>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              信息描述
            </template>
            <span>{{ desc }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <img :src="url" alt="show">
    </div>

    <div v-else-if="type === 'audio'" class="common-style">
      <div class="info">
        <el-descriptions :column="1" border>
          <el-descriptions-item>
            <template #label>
              文件名
            </template>
            <span class="file-path" @click="fileLoad(fileurl)">{{ getFileName(fileurl) }}</span>
          </el-descriptions-item>

          <el-descriptions-item v-for="(item, index) in file_info" :key="index">
            <template #label>
              {{ fieldInfo[index] || index }}
            </template>
            {{ item }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              数据来源
            </template>
            <span>{{ source }}</span>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              信息描述
            </template>
            <span>{{ desc }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <audio controls>
        <source :src="url" :type="'audio/' + filesuffix" />
      </audio>
    </div>

    <div v-else-if="type === 'video'" class="common-style">
      <div class="info">
        <el-descriptions :column="1" border>
          <el-descriptions-item>
            <template #label>
              文件名
            </template>
            <span class="file-path" @click="fileLoad(fileurl)">{{ getFileName(fileurl) }}</span>
          </el-descriptions-item>

          <el-descriptions-item v-for="(item, index) in file_info" :key="index">
            <template #label>
              {{ fieldInfo[index] || index }}
            </template>
            {{ item }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              数据来源
            </template>
            <span>{{ source }}</span>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              信息描述
            </template>
            <span>{{ desc }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <video controls :src="url" width="500px"></video>
    </div>

    <div v-else class="common-style">
      <div class="info" >
        <el-descriptions :column="1" border>
          <el-descriptions-item>
            <template #label>
              文件名
            </template>
            <span class="file-path" @click="fileLoad(fileurl)">{{ getFileName(fileurl) }}</span>
          </el-descriptions-item>

          <el-descriptions-item v-for="(item, index) in file_info" :key="index">
            <template #label>
              {{ fieldInfo[index] || index }}
            </template>
            {{  protocol === 'sctp' && index === 'filetype' ? 'ASCII text' : item }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              数据来源
            </template>
            <span>{{ source }}</span>
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              信息描述
            </template>
            <span>{{ desc }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ShowBox',
  data () {
    return {
      type: '',
      url: '',

      fieldInfo: {
        pages: '页数',
        filetype: '文件类型',
        author: '作者'
      },

      filesuffix: '',

      audioArr: ['ogg', 'mp3', 'wav'],

      videoArr: ['mp4', 'webm', 'avi', 'ogv']
    }
  },

  props: ['filetype', 'fileurl', 'file_info', 'source', 'desc', 'protocol'],

  mounted () {
    this.setType()
  },

  methods: {
    setType () {
      if (!this.filetype) return

      const temp = this.filetype.toLocaleLowerCase()

      const filename = this.getFileName(this.fileurl)

      this.filesuffix = filename.substring(filename.lastIndexOf('.') + 1)

      if (temp.indexOf('image') !== -1) {
        this.type = 'image'
      } else if (temp.indexOf('audio') !== -1 && this.audioArr.indexOf(this.filesuffix) !== -1) {
        this.type = 'audio'
      } else if (temp.indexOf('video') !== -1 && this.audioArr.indexOf(this.filesuffix) !== -1) {
        this.type = 'video'
      } else {
        this.type = ''
      }

      if (process.env.NODE_ENV === 'development') {
        this.url = 'http://192.168.5.63:1337/' + this.fileurl
      } else {
        this.url = this.fileurl
      }
    },

    // 邮件附件下载
    /* eslint-disable */
    fileLoad (fileUrl) {
      if (process.env.NODE_ENV === 'development') {
        const fileName = this.getFileName(fileUrl)
        const a_link = document.createElement('a')
        fetch('http://192.168.5.63:1337/' + fileUrl).then(res => res.blob()).then(blob => { 
          a_link.href = URL.createObjectURL(blob)
          a_link.download = fileName
          document.body.appendChild(a_link)
          a_link.click()
          a_link.remove()
        })
      } else {
        const fileName = this.getFileName(fileUrl)
        const a_link = document.createElement('a')
        fetch(fileUrl).then(res => res.blob()).then(blob => { 
          a_link.href = URL.createObjectURL(blob)
          a_link.download = fileName
          document.body.appendChild(a_link)
          a_link.click()
          a_link.remove()
        })
      }
    },

    // 截取文件名
    getFileName (value) {
      if (value) {
        let index = value.lastIndexOf('\\')
        if (index !== -1) {
          return value.substring(index + 1)
        } else {
          index = value.lastIndexOf('/')
          return value.substring(index + 1)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.ShowBox {
  position: relative;
  img {
    // width: 500px;
    height: 188px;
    display: block;
    margin-left: 20px;
    // margin: 20px;
  }

  .common-style {
    display: flex;
    align-items: center;
    margin: 20px;
  }

  .info {
    width: 720px;
    // margin: 20px;
  }

  .file-path {
    color: #409eff;
    cursor: pointer;
    text-decoration: underline;
  }

  :deep(.el-descriptions) {
    margin: 0 !important;
  }
}
</style>
